<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小A版QQ空间</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <!-- 引入css重置样式表 -->
    <link rel="stylesheet" href="./fa/css/all.min.css" />
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 引入最初的样式表 -->
    <link rel="stylesheet" href="./css/topbar.css" />
    <!-- 引入顶部导航栏的样式 -->
    <link rel="stylesheet" href="./css/ad-login.css" />
    <!-- 引入登陆界面的样式 -->
    <link rel="icon" href="./img/favicon.ico" />
    <!-- 引入页面logo -->
    <link rel="stylesheet" href="./css/allDynamic.css" />
    <!-- 引入个人动态空间 -->
    <link rel="stylesheet" href="./css/personDy.css" />
    <!-- 引入查询动态的样式 -->
    <link rel="stylesheet" href="./css/searchDy.css" />
    <!-- 引入个人相册模块的样式 -->
    <link rel="stylesheet" href="./css/personAB.css" />
    <!-- 引入分页的样式 -->
    <link rel="stylesheet" href="./css/pageBox.css" />
    <!-- 引入主题切换的样式 -->
    <link rel="stylesheet" href="./css/theme.css" />
  </head>

  <body>
    
    <!-- <iframe
      frameborder="no"
      border="0"
      marginwidth="0"
      marginheight="0"
      width="280"
      height="52"
      src="//music.163.com/outchain/player?type=0&id=6739433370&auto=1&height=32"
    ></iframe> -->
    <!-- 导航栏 -->
    <div class="topbar-wrapper">
      <div class="torbar w">
        <div class="topLogo">
          <img id="topLogoIco" src="./img/头部logo.png" alt="" />
        </div>
        <ul class="topbar-list">
          <li class="queryAllDy"><i class="fas fa-globe"></i> 所有动态</li>
          <li class="queryPersonDy"><i class="fas fa-home"></i> 个人空间</li>
          <li class="queryPersonAB"><i class="fas fa-images"></i> 个人相册</li>
          <li class="searchDy"><i class="fas fa-search"></i> 搜索动态</li>

          <li class="themeTab">
            <i class="fas fa-sort"></i> 主题切换
            <div class="themeBox">
              <div id="sunMod">日间模式</div>
              <div id="nightMod">MC模式</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 广告和注册登陆容器 -->
    <div class="ad-login-wrapper">
      <div class="ad-login-box w">
        <div class="banner">
          <img id="bannerImg" src="./img/homepage.png" alt="" />
        </div>
        <!-- 登陆注册容器 -->
        <div class="login-box" id="loginBox">
          <div class="tab-btnBox">
            <div class="tabSign">登陆</div>
            <div class="tabRegister">注册</div>
          </div>
          <form class="signIpt" action="">
            <li>
              <input
                type="text"
                placeholder="请输入账号"
                class="input_name"
                id="lg_username"
                maxlength="10"
              />
              <div>
                <input
                  class="checkBtn"
                  type="checkbox"
                  name="remName"
                  id="remName"
                  value="
            "
                />
                是否记住账号
              </div>
            </li>

            <li>
              <input
                type="password"
                placeholder="请输入密码"
                class="input_password"
                id="lg_password"
                maxlength="16"
                autocomplete="off"
              />
              <div>
                <input
                  class="checkBtn"
                  type="checkbox"
                  name="remPW"
                  id="remPW"
                  value="
            "
                />
                是否记住密码(7天免登录)
              </div>
            </li>
            <li><button type="button" id="signBtn">点击登陆</button></li>
          </form>
          <form class="registerIpt">
            <li>
              <input
                type="text"
                placeholder="请设置账号(只由英文,数字,“_”组成)"
                class="input_name"
                id="re_username"
                name="emailNumber"
                autocomplete="off"
                maxlength="10"
              />
            </li>
            <li>
              <input
                type="password"
                placeholder="请设置密码(小于16位)"
                class="input_name"
                id="re_password"
                maxlength="16"
                autocomplete="off"
              />
            </li>

            <li>
              <input
                type="text"
                placeholder="请输入名字"
                class="input_name"
                id="re_name"
                maxlength="10"
              />
            </li>
            <li>
              <input
                type="text"
                placeholder="请输入电话号码(13,15,17,18开头)"
                class="input_name"
                id="re_phone"
                maxlength="11"
              />
            </li>
            <li><button type="button" id="registerBtn">点击注册</button></li>
          </form>
          <form class="userInfo" action="">
            <img id="userImg" src="" alt="" />

            <ul>
              <li class="userNameD"></li>
              <li class="userIdD"></li>
              <li class="userPwD"></li>
              <li class="userPhoneD"></li>
            </ul>

            <div class="signFuncBox">
              <li id="downSign">注销</li>
              <li id="modifyPW">修改密码</li>
              <li id="upAvatarBtn">上传/修改头像</li>
              <li id="upAvatarBox">
                <input
                  type="file"
                  id="imgFile"
                  onchange="perviewAvatar(this)"
                />
              </li>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- 查看所有动态的容器 -->
    <div class="dynamic-wrapper">
      <div class="dynamic-BigBox w">
        <h2>小A的动态空间</h2>
        <div class="pageBox"></div>
        <div class="dynamic-Box">
          <div class="AllDy"></div>
        </div>
      </div>
    </div>
    <!-- 搜索动态的容器 -->
    <div class="search-wrapper">
      <div class="search-BigBox w">
        <h2>搜索到的动态</h2>
        <div id="searchedDyBox">
          <ul class="searchIptBox">
            <input
              type="text"
              id="searchIpt"
              placeholder="搜索关键字（可搜索的关键字：动态的id，用户名，动态内容，标题，创建时间）
          "
            />
            <button type="button" id="submitSearchBtn">
              <i class="fas fa-search"></i>
            </button>
          </ul>
          <div id="searchResultBox"></div>
        </div>
      </div>
    </div>
    <!-- 进入个人动态的容器 -->
    <div class="personDy-wrapper">
      <div class="personDy-BigBox w">
        <h2>个人动态空间</h2>
        <ul class="personDyBtn">
          <button id="upDyBtn" type="button">发布动态</button>
          <button id="delDyBtn" type="button">删除动态</button>
          <button id="lookPersonDy" type="button">个人动态(可删除)</button>
        </ul>
        <form class="upPersonDy-box">
          <li>
            <input
              type="text"
              placeholder="请在此处输入标题"
              id="userDyTitle"
              name="title"
            />
          </li>
          <li>
            <textarea
              type="text"
              placeholder="请在此处输入内容"
              id="userDyContent"
              name="content"
              style="resize: none; font-size: 18px"
            ></textarea>
          </li>
          <div id="previewDyImgBox"></div>
          <li>
            <input
              style="display: block; transform: translateX(20%)"
              type="file"
              id="userDyPhoto"
              multiple="multiple"
              onchange="previewDyImg(this)"
            />
          </li>

          <div style="text-align: center; margin-top: 10px; font-size: 18px">
            <input
              class="checkBtn"
              type="checkbox"
              id="upDyPhoto"
              value="
    "
            />
            是否上传图片(是请选中)
          </div>

          <li class="upANDback">
            <button id="submitDyBtn" type="button">上传</button>
            <button id="saveCaoGaoBtn" type="button">保存</button>
            <button id="trunBackDyBtn" type="button">返回</button>
          </li>
        </form>
        <form action="" id="lookPersonDyBox"></form>
      </div>
    </div>
    <!-- 个人相册的容器 -->
    <div class="personAB-wrapper">
      <div class="personAB-BigBox w">
        <h2>个人相册</h2>
        <ul class="personABbtn">
          <button id="creatABbtn" type="button">新建相册</button>
          <button id="upImgABbtn" type="button">上传图片</button>

          <button id="lookABbtn" type="button">查看相册</button>
        </ul>
        <div class="createAbBox">
          <input
            type="text"
            placeholder="请在此处输入一个新的相册的标题"
            id="createAbIpt"
          />
          <button id="submitAbTitle">提交</button>
        </div>

        <div class="upABimgBox">
          <input
            type="file"
            multiple="multiple"
            id="upABimg"
            onchange="previewImg(this)"
          />
          <input
            type="text"
            placeholder="请在这里输入上传相册的ID"
            id="upAbId"
          />
          <div class="lookUpImgBox"></div>
          <button id="submitAbImg">提交</button>
        </div>
        <!-- 查看相册的容器 -->
        <div class="lookABphotoBox"></div>
        <!-- 查看相册里面 -->
        <div class="lookABphotoDetail">
          <img src="./img/blank.png" alt="" />
          <img src="./img/blank.png" alt="" />
          <img src="./img/blank.png" alt="" />
          <img src="./img/blank.png" alt="" />
          <img src="./img/blank.png" alt="" />
          <img src="./img/blank.png" alt="" />
        </div>
      </div>
    </div>
  </body>
  <footer>
    <!-- 各个接口地址 -->
    <script src="./js/api.js/api.js"></script>

    <!-- 切换登陆注册界面 -->
    <script src="./js/用户信息模块/Tab.js"></script>

    <!-- 顶部按钮的功能 -->
    <script src="./js/动态模块.js/tabTopBlock.js"></script>

    <!-- Promise封装的有关用户的AJAX请求 -->
    <script src="./js/api.js/用户信息发送请求.js"></script>

    <!-- 登陆所需要的JS操作 -->
    <script src="./js/用户信息模块/sign.js"></script>

    <!-- 注册所需要的JS操作 -->
    <script src="./js/用户信息模块/register.js"></script>

    <!-- 修改密码所需要的JS操作 -->
    <script src="./js/用户信息模块/modifyPW.js"></script>

    <!-- 上传头像所需要的JS操作 -->
    <script src="./js/用户信息模块/upAvatar.js"></script>

    <!-- 获得动态的AJAX请求 -->
    <script src="./js/api.js/动态Get.js"></script>

    <!-- 查询所有动态的JS -->
    <script src="./js/动态模块.js/queryAllDy.js" async></script>

    <!-- 用户发布动态需要的JS -->
    <script src="./js/动态模块.js/upPersonDy.js"></script>

    <!-- 展示用户个人动态需要的JS -->
    <script src="./js/动态模块.js/queryPersonDy.js"></script>

    <!-- 引入删除动态功能 -->
    <script src="./js/动态模块.js/delPersonDy.js"></script>

    <!-- 引入搜索模块 -->
    <script src="./js/动态模块.js/searchDy.js"></script>

    <!-- 引入查询个人相册模块 -->
    <script src="./js/个人相册模块/queryAB.js"></script>

    <!-- 引入新建相册模块 -->
    <script src="./js/个人相册模块/createAlbum.js"></script>

    <!-- 引入上传相片木块 -->
    <script src="./js/个人相册模块/upImgToAB.js"></script>

    <!-- 引入删除图片的功能 -->
    <script src="./js/个人相册模块/delABimg.js"></script>
    <!-- 分页效果 -->
    <script src="./js/动态模块.js/multiPage.js"></script>

    <!-- 主题切换 -->
    <script src="./js/切换主题/night.js"></script>
  </footer>
</html>
